@import './theme';

$char: #d8dee9;
$comment: #999999;
$keyword: #c5a5c5;
$lineHighlight: #14161a;
$primitive: #5a9bcf;
$string: #8dc891;
$variable: #d7deea;
$boolean: #ff8b50;
$punctuation: #5fb3b3;
$tag: #fc929e;
$function: #79b6f2;
$className: #fac863;
$method: #6699cc;
$operator: #fc929e;

.prism {
  display: block;
  color: $white;
  background-color: $dark;
  font-family: $font-family-monospace !important;
  font-size: 14px;
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;

  & :global .token {
    &.attr-name {
      color: $keyword;
    }

    &.comment,
    &.block-comment,
    &.prolog,
    &.doctype,
    &.cdata {
      color: $comment;
    }

    &.property,
    &.number,
    &.function-name,
    &.constant,
    &.symbol,
    &.deleted {
      color: $primitive;
    }

    &.boolean {
      color: $boolean;
    }

    &.tag {
      color: $tag;
    }

    &.string {
      color: $string;
    }

    &.punctuation {
      color: $punctuation;
    }

    &.selector,
    &.char,
    &.builtin,
    &.inserted {
      color: $char;
    }

    &.function {
      color: $function;
    }

    &.operator,
    &.entity,
    &.url,
    &.variable {
      color: $variable;
    }

    &.attr-value {
      color: $string;
    }

    &.keyword {
      color: $keyword;
    }

    &.atrule,
    &.class-name {
      color: $className;
    }

    &.important {
      font-weight: 400;
    }

    &.bold {
      font-weight: 700;
    }

    &.italic {
      font-style: italic;
    }

    &.entity {
      cursor: help;
    }
  }

  .namespace {
    opacity: 0.7;
  }
}
